<template>
    <h-section title="业务需求及其关联产品需求" collapse :defaultOpen="!!form.pmpRequestInfos.length" class="relate-require-list-wrap">
        <a-table rowKey="id" bordered size="small" :columns="tableColumns" :data-source="form.pmpRequestInfos" :pagination="false" :expandedRowKeys="expandedRowKeys" @expandedRowsChange="expandedRowsChange">
            <template #level="{ record }">
                <h-level :level="record.level" v-if="record.level" />
            </template>
            <template #action="{ record }">
                <a @click="showDetail(record)">详情</a>
            </template>
            <!-- 产品需求 -->
            <template #expandedRowRender="{ record, index }">
                <product-table ref="ProductTableRef" v-bind="$props" :list="record.pmpProductRequires" @syncData="getSyncData($event, index)">
                    <template #title>
                        <div class="font-w-b" style="padding: 0 0 8px 0px">受理信息</div>
                        <!-- background: #fff; -->
                        <div style="padding: 8px 0px 8px 8px; margin-left: -8px; min-height: 32px; white-space: pre-wrap" v-html="record.auditOpinion" />
                        <template v-if="canShowOpinion">
                            <a-divider style="margin: 8px 0" />
                            <div class="font-w-b" style="padding: 0 0 8px 0px">评审意见</div>
                            <div style="padding-right: 16px">
                                <a-textarea placeholder="请输入评审意见限制200个字" v-model:value="record.verOpinion" :maxlength="200" auto-size v-if="canEditOpinion" />
                                <span class="opinion-cont" v-html="record.verOpinion" v-else />
                                <flexbox justify="flex-end" class="margin-t-8" v-if="canEditOpinion">
                                    <a @click="handleSave(index)" :class="[record.verOpinion ? 'canEdit' : 'disabledEdit']">保存</a>
                                    <a @click="handleClear(index)" :class="['margin-l-8', record.verOpinion ? 'canEdit' : 'disabledEdit']">清空</a>
                                </flexbox>
                            </div>
                        </template>
                    </template>
                </product-table>
            </template>
        </a-table>
    </h-section>
</template>

<script lang="ts">
import { HLevel } from '@/components';
import ProductTable from './productTable.vue';
import { useRouter } from 'vue-router';
import api from '@/api';
import { message } from 'ant-design-vue';
import { defineComponent, ref, unref, reactive, toRefs, computed, watch, nextTick } from 'vue';
export default defineComponent({
    name: 'RelateRequireList',
    components: {
        HLevel,
        ProductTable
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        disabled: { type: Boolean, default: false },
        stepStatus: { type: String, default: '' }
    },
    setup(props) {
        const ProductTableRef = ref<any>();
        const router = useRouter();
        const state = reactive<any>({
            form: {
                pmpRequestInfos: []
            },
            expandedRowKeys: []
        });
        const tableColumns = [
            {
                title: '业务需求名称',
                dataIndex: 'requestName',
                ellipsis: true
            },
            {
                title: '开发周期(天)',
                dataIndex: 'devCycle',
                width: 150
            },
            {
                title: '费用(元)',
                dataIndex: 'cost',
                width: 150
            },
            {
                title: '发起人',
                dataIndex: 'initiator',
                width: 150
            },
            {
                title: '发起部门',
                dataIndex: 'initiatorDept',
                width: 150
            },
            {
                title: '操作',
                dataIndex: '',
                key: 'action',
                slots: { customRender: 'action' },
                align: 'center',
                width: 100
            }
        ];
        // 只有产品内部评审和产品经理修改阶段可以显示逐条批注
        const canShowOpinion = computed(() => {
            return ['productAudit', 'productChange'].includes(props.stepStatus);
        });
        // 只有产品内部评审阶段可以进行逐条批注
        const canEditOpinion = computed(() => {
            return props.stepStatus === 'productAudit' && !props.disabled;
        });
        const showDetail = (info: any) => {
            const { id } = info;
            router.push({
                path: '/taskRequire/taskDetail',
                query: {
                    id
                }
            });
        };
        const handleSave = async (index: number) => {
            const query = {
                ...state.form.pmpRequestInfos[index]
            };
            const { success } = await api.pmpRequestInfoModel.updateBusiness(query);
            if (success) {
                message.success('操作成功');
            }
        };
        const handleClear = (index: number) => {
            state.form.pmpRequestInfos[index].verOpinion = '';
            handleSave(index);
        };
        const getSyncData = (list: Recordable[], index) => {
            state.form.pmpRequestInfos[index]['pmpProductRequires'] = list;
        };
        const validate = async () => {
            state.expandedRowKeys = state.form.pmpRequestInfos.map((item) => item.id);
            await nextTick();
            await nextTick();
            await nextTick();
            return unref(ProductTableRef) ? unref(ProductTableRef).validate() : true;
        };
        const expandedRowsChange = (val) => {
            state.expandedRowKeys = val;
        };
        const init = () => {
            const pmpRequestInfos = props.detail.pmpRequestInfos ? props.detail.pmpRequestInfos : [];
            const newArr: any[] = [];
            if (pmpRequestInfos.length) {
                pmpRequestInfos.forEach((item) => {
                    // 默认评分
                    let pmpProductRequires = item.pmpProductRequires ? item.pmpProductRequires : [];
                    pmpProductRequires = pmpProductRequires.map((item) => {
                        if (item.pmpProductScoreDTO) {
                            const { requestDesc, prototype, splitGranularity } = item.pmpProductScoreDTO;
                            return {
                                ...item,
                                pmpProductScoreDTO: {
                                    requestDesc: requestDesc || 0,
                                    prototype: prototype || 0,
                                    splitGranularity: splitGranularity || 0
                                }
                            };
                        } else {
                            return {
                                ...item,
                                pmpProductScoreDTO: {
                                    requestDesc: 5,
                                    prototype: 5,
                                    splitGranularity: 5
                                }
                            };
                        }
                    });
                    newArr.push({
                        ...item,
                        pmpProductRequires
                    });
                });
                state.form.pmpRequestInfos = [...newArr];
            }
        };
        init();
        watch(() => props.detail, init, { deep: true });
        return {
            ProductTableRef,
            ...toRefs(state),
            tableColumns,
            canShowOpinion,
            canEditOpinion,
            showDetail,
            handleSave,
            handleClear,
            getSyncData,
            validate,
            expandedRowsChange
        };
    }
});
</script>
<style lang="less" scoped>
.flow-text {
    margin-bottom: 8px;
    a {
        font-size: 14px;
        margin-left: 8px;
    }
}
.relate-require-list-wrap {
    // table的title背景色
    ::v-deep(.ant-table-title) {
        background: #f8f8f9;
        border: none;
        margin: 0;
        padding: 12px 0 8px 8px;
    }
    ::v-deep(.ant-table-body) {
        .ant-table-body {
            .ant-table-thead > tr > th {
                background: #f8f8f9 !important;
                font-weight: bold;
            }
            .ant-table-tbody {
                background: #f8f8f9 !important;
            }
        }
    }
    ::v-deep(tr.ant-table-expanded-row) {
        & > td:first-child {
            border-right: none !important;
        }
    }
    .canEdit {
        cursor: pointer;
        color: @primary-color;
    }
    .disabledEdit {
        cursor: not-allowed;
        color: @disable-font-color;
    }
    .opinion-cont {
        white-space: pre-wrap;
        color: @error-color;
    }
}
</style>